<template>
    <div class="m-tophead f-pr j-tflag">
        <div class="head f-fl f-pr" @mouseenter="mouseEnterHeadHandler" @mouseleave="mouseLeaveHeadHandler">
            <img :src="topMyInfo.myAvatar" :alt="topMyInfo.myName">
            <router-link :to="topMyInfo.myRoute" class="mask"></router-link>
            <i class="m-topmsg f-pa j-uflag" :class="isHideRedDot ? 'f-hide' : ''">{{ topMyInfo.myMessageCount }}</i>
        </div>
        <a :href="topMyInfo.myRoute" class="name f-thide f-fl f-tdn f-hide">{{ topMyInfo.myName }}</a>
        <div class="m-tlist m-tlist-lged j-uflag" :style="selectionListStyle" ref="selectionList"
            @mouseenter="mouseEnterSelectionListHandler" @mouseleave="mouseLeaveSelectionListHandler">
            <ul v-for="(item, index) in topHeadData" key="index" class="clear-block" :class="item.className">
                <li v-for="(subItem, index2) in item.selectionList" key="index2">
                    <router-link hidefocus="true" :class="subItem.aClassName" :to="subItem.route"
                        :target="subItem.isTarget ? '_blank' : ''">
                        <i class="icn" :class="subItem.icnClassName"></i>
                        <em>{{ subItem.name }}</em>
                        <span class="m-topmsg f-pa j-uflag" v-if="subItem.messageCount">{{ subItem.messageCount
                            }}</span>
                    </router-link>
                </li>
            </ul>
            <i class="arr"></i>
        </div>

    </div>
</template>
<script setup>
import topHeadData from '@/json_data/top_head.json'
import topMyInfo from '@/json_data/top_my_info.json'
import { reactive, ref } from 'vue'
const isHideRedDot = ref(false)
const isHideSelectionList = ref(false)

const selectionListStyle = ref({
    display: 'none'
})

let isMouseEnterSelectionList = false
const mouseEnterHeadHandler = () => {
    isHideRedDot.value = true;
    selectionListStyle.value = {};
}

const mouseEnterSelectionListHandler = () => {
    isMouseEnterSelectionList = true;
}

const mouseLeaveSelectionListHandler = () => {
    isHideRedDot.value = false;
    selectionListStyle.value = { display: 'none' };
    isMouseEnterSelectionList = false;
}

const mouseLeaveHeadHandler = () => {
    setTimeout(() => {
        if (isMouseEnterSelectionList) return

        isHideRedDot.value = false;
        selectionListStyle.value = { display: 'none' }

    }, 100)

}

</script>
<style lang="scss" scoped>
.m-tophead {
    height: 45px;
    margin: 12px 0 0 0;
    padding: 0 22px 0 0;
    background-position: right -47px;
    background-image: none;

    .name {
        display: inline-block;
        max-width: 100px;
        margin: 8px 0 0 8px;
        line-height: 17px;
        color: #adadad;

        &:hover {
            color: #d3d3d3;
        }
    }

    .head {
        margin-top: 1px;

        &,
        img {
            width: 30px;
            height: 30px;
        }

        img {
            border-radius: 30px;

        }

        .m-topmsg {
            top: -5px;
            left: 20px;
        }





    }

    .m-tlist {
        position: absolute;
        z-index: 1;
        top: 38px;
        right: -50px;
        width: 158px;
        background: #2b2b2b;
        border: 1px solid #202020;
        box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.50);
        border-radius: 4px;

        .ltb {
            border: 1px solid #232323;
            border-width: 1px 0;
        }

        li {

            &,
            a {
                float: left;
                box-sizing: border-box;
                width: 100%;
            }

        }

        a {
            position: relative;
            height: 38px;
            box-sizing: border-box;
            overflow: hidden;
            padding-left: 24px;
            color: #ccc;
            line-height: 39px;

            &:hover {
                background: #353535;
                text-decoration: none;
                color: #fff;
            }
        }

        em {
            float: left;
            width: 100px;
        }

        .m-topmsg {
            top: 7px;
            left: 110px;
        }

        .arr {

            position: absolute;
            top: -8px;
            left: 50%;
            width: 14px;
            height: 8px;
            margin-left: -7px;
            background-position: -20px 0;
        }


    }

    .m-tlist-lged {
        a {
            height: 34px;
            line-height: 34px;
        }

        .arr {
            margin-left: -8px;
        }
    }


}
</style>